<template>
<section class="container">
       <!-- 导航栏 -->
        <div class="row">
          <div class="h-r-nsl">
          
          <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>

            <!-- <router-link to="/Firectrl" tag="li" active-class="current" exact>
              <a>火警检测</a>
            </router-link>
            <router-link to="/Peoplealarm" tag="li" active-class="current" exact>
              <a>人员聚集</a>
            </router-link>
            <router-link to="/Edgealarm" tag="li" active-class="current" exact>
              <a>人员闯入</a>
            </router-link> -->
            <!-- 登录和注册 -->
            <li class="login">
                <router-link to="/login" title="登录">
                    <span class="vam ml5">登录</span>
                </router-link>
            </li>
            <li>   
                <router-link to="/register" title="注册">
                    <span class="vam ml5">注册</span>
                </router-link>
            </li>  
                   
          </ul>

          <!-- 登录和注册 -->
          <!-- <ul class="h-r-login">
            <li>
                <router-link to="/login" title="登录">
                    <span class="vam ml5">登录</span>
                </router-link>
                |
                <router-link to="/register" title="注册">
                    <span class="vam ml5">注册</span>
                </router-link>
            </li>
            <li>
                <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
            </li> -->
          <!-- /未登录显示第1 li；登录后显示第2，3 li -->
       
          </div>
        </div>  
        <div class="row">

        </div>
      </section>  
</template>

<script>
export default {
    name:'Home',
    // beforeDestroy(){
    //   console.log('Home组件即将被销毁了')
    // },
    // mounted(){
    //   console.log('Home组件挂载完毕')

    // }
    data() {
      return {
        activeName:'first'
      }
    },
    methods:{
      logout(){
        window.sessionStorage.clear();
        this.$router.push({path:"/login"});
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //退出
      logout() {
      //清空cookie值
      cookie.set('guli_token','',{domain: 'localhost'})
      cookie.set('guli_ucenter','',{domain: 'localhost'})
      //回到首页面
      window.location.href = "/";
    }
    }
}
</script>

<style scoped>
 @media screen and (min-width:1280px) {
.container{
        position: relative;
        width:1280px;
    }
}
/* .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  } */

  body{
    background-color: skyblue;
}
.h-r-nsl{
    /* background-color: pink; */
    widows: 1250px;
    line-height: 60px;
    text-align: center;
}
.h-r-nsl ul li{
    float: left;
}
.nav {
    height:100px;
    background-color: skyblue;
    text-align: center;
}

a{
    color:#fff;
    font-size: 16px;
}

.nav li{
    float: left;
    font-size: 16px;
    font-weight: 700;
}
.login{
  margin-left: 700px;
}
</style>